<template>
  <div>
    <div class="flex">
      <div class="flex-left">
        <div class="navigationBar">
          <label>标签目录</label>
          <span @click="showFolder()"
            ><i class="el-icon el-icon-circle-plus"></i
          ></span>
        </div>
        <div class="flex-tree">
          <div
            :class="tableIndex == item.Id ? 'hover tree-item' : 'tree-item'"
            v-for="item in tableList"
            v-bind:key="item.Id"
            @click="tableClick(item)"
          >
            {{ item.FolderName }}

            <i class="el-icon-delete delete" @click="deleteFolder(item)"></i>
            <i class="el-icon-edit edit" @click="editFolder(item)"></i>
          </div>

          <!-- <div
						v-if="tableList.length == 0"
						style="text-align: center; margin-top: 100px; color: #666"
					>
						暂无数据
					</div> -->
        </div>
      </div>
      <div class="flex-right">
        <navigation-bar>
          <div class="searchContent">
            <el-input
              v-model="tagName"
              placeholder="请输入标签名称"
              size="mini"
              style="width: 150px; margin-right: 10px"
              @keyup.enter.native="searchClick"
            ></el-input>
            <custom-button
              type="search"
              style="margin-right: 10px"
              @searchClick="searchClick"
            ></custom-button>
            <custom-button
              type="reset"
              style="margin-right: 10px"
              @resetClick="resetClick"
            ></custom-button>
            <custom-button
              type="add"
              style="margin-right: 10px"
              @addClick="addClick"
            ></custom-button>
            <el-button
              size="mini"
              style="
                margin-right: 10px;
                background-color: #fc6a6e;
                color: #fff;
                border: none;
              "
              @click="deleteAll"
            >
              <i class="el-icon-delete"></i> 批量删除
            </el-button>
          </div>
        </navigation-bar>
        <tableHeightIndex
          :dataSource="dataSource"
          :tableColumns="tableColumns"
          :btnList="btnList"
          :pageSize="pageSize"
          :pageCount="pageCount"
          :pageNo="pageNo"
          @pageChange="pageChange"
          @editRow="editRow"
          @viewRow="viewRow"
          @deleteRow="deleteRow"
          @handleSelectionChange="handleSelectionChange"
          :height="curHeight"
          selection
        ></tableHeightIndex>
        <!-- selection tableIndex的勾选属性，批量删除时放开，暂未接口 -->
      </div>
    </div>

    <div v-if="dialogShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogClose"
      >
        <form-index
          :formConfig="formConfig"
          @submit="submit"
          :type="type"
          @formInputChange="formInputChange"
          ref="form"
        >
        </form-index>
      </custom-dialog>
    </div>

    <div v-if="dialogFolderShow">
      <custom-dialog
        :title="dialogFolderTitle"
        size="large"
        @dialogClose="dialogFolderClose"
      >
        <form-index
          :formConfig="formConfigFolder"
          @submit="folderSubmit"
          :type="typeFolder"
          @formInputChange="formInputFolderChange"
          ref="form"
        >
        </form-index>
      </custom-dialog>
    </div>
  </div>
</template>

<script>
import { tagFolderForm } from "@/assets/form/managementCenter/tagFolderForm";
import { tagManageForm } from "@/assets/form/managementCenter/tagManageForm";
import customDialog from "@/components/customComponents/customDialog";
import customButton from "@/components/customComponents/customForm/customButton";
import formIndex from "@/components/customComponents/customForm/formIndex";
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
export default {
  components: {
    navigationBar,
    customButton,
    customDialog,
    formIndex,
    tableHeightIndex,
  },
  data() {
    return {
      curHeight: 100,
      dialogFolderShow: false,
      tableIndex: "",
      tableList: [
        {
          FolderName: "",
          EnCode: "",
          // 相当于parentId
          LastFolderId: "",
          FullEnCode: "",
          IsDelete: false,
          Id: "",
        },
      ],
      selectItem: [],
      tagName: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "TagName",
          label: "标签名称",
        },
        {
          prop: "Descipt",
          label: "标签说明",
          width: 120,
        },
        // {
        // 	prop: "userage",
        // 	label: "创建时间",
        // },
      ],
      btnList: ["edit", "delete"],
      pageSize: 20,
      pageCount: 100,
      pageNo: 1,
      // table 相关参数  end

      // 弹窗是否显示
      dialogShow: false,
      // 弹窗标题 (新增修改不同)
      dialogTitle: "",

      // form的配置信息
      formConfig: tagManageForm,
      type: "add",

      formConfigFolder: tagFolderForm,
      typeFolder: "add",
      dialogFolderTitle: "新增目录",
    };
  },
  methods: {
    getHeight() {
      this.curHeight = window.innerHeight - 146;
    },
    showFolder() {
      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      let formConfigItem = this.formConfigFolder;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = "";
          }
        });
      });
      this.formConfigFolder = formConfigItem;
      this.dialogFolderShow = true;
    },
    editFolder(item) {
      console.log(item, "item.....");
      let formConfigItem = this.formConfigFolder;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = item[t[res]];
          }
        });
      });
      this.formConfigFolder = formConfigItem;
      this.typeFolder = "edit";
      this.dialogFolderTitle = "编辑目录";
      this.dialogFolderShow = true;
    },
    deleteFolder(item) {
      let self = this;
      const id = item.Id;
      console.log(item, "item");
      PopupCommon.confirm(`确定删除【${item.FolderName}】？`)
        .then(() => {
          AjaxCommon("/api/folder/Delete?id=" + id, "delete", {
            optReason: "删除",
          }).then((res) => {
            console.log(res, "res...............");
            if (res.data.status == 200) {
              PopupCommon.notify("success", "删除成功");
              self.initLeftFolder(() => {
                self.initPage();
              });
              self.dialogFolderClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    tableClick(item) {
      this.tableIndex = item.Id;
      this.initPage();
    },
    deleteAll() {
      if (this.selectItem.length == 0) {
        PopupCommon.notify("info", "请先勾选数据");
        return;
      }
      PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
        .then(() => {
          console.log(this.selectItem);
          var ids = "";
          this.selectItem.forEach((t) => {
            ids += "id=" + t.Id + "&";
          });
          ids = ids.substring(0, ids.length - 1);
          console.log(ids, "v........");
          let self = this;
          AjaxCommon("/api/Tag/Delete?" + ids, "delete", {
            optReason: "12313",
          }).then((res) => {
            console.log(res, "res...............");
            if (res.data.status == 200) {
              PopupCommon.notify("success", "删除成功");
              self.initPage();
              self.dialogClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          });
        })
        .catch(() => {
          // 这里尽量写下，否则会报警告异常。
          console.log("已取消删除");
        });
    },
    handleSelectionChange(d) {
      this.selectItem = d;
      console.log(d);
    },

    formInputFolderChange(e) {
      console.log(e, "e...................");
    },
    formInputChange(e) {
      // if (e.filedName == "idCard") {
      // 	const data = CardId.getInfoByCardId(e.value)
      // 	if (data) {
      // 		let newData = e.allData
      // 		newData["birthday"] = data.birthday
      // 		newData["sex"] = data.sex
      // 		this.$refs.form.changeFormValue(newData)
      // 	}
      // }
      console.log(e);
    },
    folderSubmit(d) {
      let self = this;
      var params = {
        FolderName: d.FolderName,
        FatherFolderId: 0,
        FolderType: 6,
      };
      var titleOpr = "新增成功";
      if (d.Id) {
        params["Id"] = d.Id;
        titleOpr = "编辑成功";
      }
      AjaxCommon(`/api/folder`, "postForm", params)
        .then((res) => {
          console.log(res, "res..................");
          if (res.data.status == 200) {
            PopupCommon.notify("success", titleOpr);
            self.initLeftFolder(() => {
              self.initPage();
            });
            self.dialogFolderClose();
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        })
        .catch((err) => {
          PopupCommon.notify("error", err.message);
        });
    },
    submit(d) {
      let self = this;
      console.log(d, "submit");
      if (d.Id) {
        d.FolderID = this.tableIndex;
        AjaxCommon("/api/Tag", "postForm", d)
          .then((res) => {
            if (res.data.status == 200) {
              PopupCommon.notify("success", "操作成功");
              self.initPage();
              self.dialogClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          })
          .catch((err) => {
            PopupCommon.notify("error", err.message);
          });
      } else {
        delete d.Id;
        d.FolderID = this.tableIndex;
        AjaxCommon("/api/Tag", "postForm", d)
          .then((res) => {
            if (res.data.status == 200) {
              PopupCommon.notify("success", "操作成功");
              self.initPage();
              self.dialogClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          })
          .catch((err) => {
            PopupCommon.notify("error", err.message);
          });
      }
    },
    dialogClose() {
      this.dialogShow = false;
    },
    dialogFolderClose() {
      this.dialogFolderShow = false;
    },
    searchClick() {
      this.pageNo = 1;
      this.initPage();
    },
    resetClick() {
      this.tagName = "";
      this.searchClick();
    },
    addClick() {
      if (
        this.tableIndex == 0 ||
        this.tableIndex == null ||
        this.tableIndex == ""
      ) {
        PopupCommon.notify("info", "请先创建标签目录或选择已有标签目录");
        return;
      }
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = "";
          }
        });
      });
      this.formConfig = formConfigItem;
      this.type = "add";
      this.dialogShow = true;
      this.dialogTitle = "新增标签管理";
    },
    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    editRow(d) {
      this.type = "edit";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle = "编辑标签管理";
    },
    viewRow(d) {
      this.type = "look";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle = "查看标签管理";
    },
    deleteRow(d) {
      console.log(d);
      const id = d.data.Id;
      let self = this;
      AjaxCommon("/api/Tag/Delete?id=" + [id], "delete", {
        optReason: d.optReason,
      }).then((res) => {
        console.log(res, "res...............");
        if (res.data.status == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initPage();
          self.dialogClose();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    initLeftFolder(callback) {
      let self = this;
      self.tableList = [];
      AjaxCommon("/api/folder?folderType=6", "get", null).then((res) => {
        if (res.data.status == 200) {
          self.tableList = res.data.response;
          if (self.tableList && self.tableList.length > 0) {
            this.tableIndex = self.tableList[0].Id;
            callback();
          } else {
            self.tableIndex = "";
            self.tableList = [];
          }
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    // 初始化事件
    initPage() {
      // 差个搜索功能
      let self = this;
      var params = `FolderID=${this.tableIndex}`;
      if (this.tagName) {
        params += "&TagName=" + this.tagName;
      }
      AjaxCommon(`/api/Tag?${params}`, "get", null).then((res) => {
        console.log(res, "res....");
        if (res.data.status == 200) {
          self.dataSource = res.data.response;
          // self.pageCount = res.data.response.dataCount
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
      this.initLeftFolder(() => {
        this.initPage();
      });
    });

    /*窗口自适应，关键代码*/
    window.onresize = () => {
      this.getHeight();
    };
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 148px);
  overflow-y: auto;
}

.flex .flex-left .flex-tree .delete {
  color: red;
  float: right;
  margin-top: 9px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .edit {
  color: blue;
  float: right;
  margin-top: 9px;
  cursor: pointer;
  margin-right: 10px;
}

.flex .flex-left .flex-tree .tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
  background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}
</style>
